<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { usePlayerStore, useToolStore, useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { toDou, requireImg } from '@/utils/common'
import {
  getWeatherCityId,
  getWeather,
  getWeatherPm2P5,
  getWeatherDataServer,
  getStartPointDataServer,
  getVisibilityData,
  getSmallWeatherData
} from '@/api'
import { getWindDirection } from '@/utils/common'

const toolStore = useToolStore()
const playerStore = usePlayerStore()
const { UIShow, LayerTreeShow, AnimationShow, WeatherShow } = storeToRefs(toolStore)
const { TreeNameObj } = storeToRefs(playerStore)

//天气类型
const WeatherType = ref([
  {
    name: '晴天',
    icon: requireImg('tool/晴天.png')
  },
  {
    name: '多云',
    icon: requireImg('tool/阴天.png')
  },
  {
    name: '小雨',
    icon: requireImg('tool/小雨.png')
  },
  {
    name: '小雪',
    icon: requireImg('tool/小雪.png')
  },
  {
    name: '晴转多云',
    icon: requireImg('tool/晴转多云.png')
  },
  {
    name: '阴',
    icon: requireImg('tool/阴天.png')
  },
  {
    name: '中雨',
    icon: requireImg('tool/中雨.png')
  },
  {
    name: '中雪',
    icon: requireImg('tool/中雪.png')
  },
  {
    name: '小雪转晴',
    icon: requireImg('tool/小雪转晴.png')
  },
  {
    name: '小雨转晴',
    icon: requireImg('tool/小雨转晴.png')
  },
  {
    name: '大雨',
    icon: requireImg('tool/大雨.png')
  },
  {
    name: '大雪',
    icon: requireImg('tool/大雪.png')
  },
  {
    name: '雾',
    icon: requireImg('tool/雾.png')
  },
  {
    name: '霾',
    icon: requireImg('tool/雾霾.png')
  },
  {
    name: '暴雨',
    icon: requireImg('tool/暴雨.png')
  },
  {
    name: '暴雪',
    icon: requireImg('tool/暴雪.png')
  }
])

//重置到工程默认视角
const reset = () => {
  __g.reset(7)
}

//控制左右两侧UI
const UIClick = () => {
  UIShow.value = !UIShow.value
  if (__g) {
    __g.settings.setMainUIVisibility(!UIShow.value)
  }
}

//控制图层树显隐
const LayerTreeClick = () => {
  LayerTreeShow.value = !LayerTreeShow.value
}

//控制工程中VTPK显隐
const eleMap = ref(false)
const eleMapClick = async () => {
  eleMap.value = !eleMap.value
  if (eleMap.value && __g) {
    let resultArr = await __g.settings.getLabelLayer()
    await __g.settings.setLabelLayer(resultArr.vtpks[0])
    await __g.infoTree.show(TreeNameObj['vtpk'])
  } else {
    __g.settings.removeLabelLayer()
    await __g.infoTree.hide(TreeNameObj['vtpk'])
  }
}

//控制导览显隐
const AnimationClick = () => {
  AnimationShow.value = !AnimationShow.value
}

//控制天气组件显隐
const WeatherClick = () => {
  WeatherShow.value = !WeatherShow.value
}

let curDate = ref(null)
let curTime = ref(null)
const weekData = ref(null)
const getDayTime = () => {
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let week = date.getDay()
  let h = date.getHours()
  let m = date.getMinutes()
  let s = date.getSeconds()
  let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  curTime.value = toDou(h) + ':' + toDou(m) + ':' + toDou(s)
  curDate.value = year + '.' + toDou(month) + '.' + toDou(day)
  weekData.value = weeks[week]
}

let timer = null
let timer2 = null
onMounted(() => {
  // 获取天气
  getWeatherData()
  clearInterval(timer)
  timer = null
  timer = setInterval(() => {
    getDayTime()
  }, 1000)

  getData()
  clearInterval(timer2)
  timer2 = null
  timer2 = setInterval(
    () => {
      getData()
    },
    1000 * 60 * 30
  )
})

onUnmounted(() => {
  clearInterval(timer)
  clearInterval(timer2)
})

// 获取当前天气
const WeatherData = ref()
const WeatherPm2P5 = ref()

const getWeatherData = async () => {
  const name = '深圳盐田区' // 天气地区设置成深圳

  // 获取城市里的所有市区ID
  const CityId = await getWeatherCityId(name)

  // 获取城市一天的天气信息
  const CityWeather = await getWeather(CityId.location[0].id)
  WeatherData.value = CityWeather

  // 获取pm2.5数据
  // const CityWeather_Pm2P5 = await getWeatherPm2P5(CityId.location[0].id)
  // WeatherPm2P5.value = CityWeather_Pm2P5
  // sessionStorage.setItem('WeatherPm2P5', JSON.stringify(CityWeather_Pm2P5))
}

// 获取天气图片
const getUrl = () => {
  if (WeatherData?.value?.now?.text === '晴')
    return WeatherType.value?.find((item) => item.name === '晴天')?.icon
  //   return WeatherType.value?.find((item) => item.name === WeatherData?.value?.now?.text)?.icon
  return WeatherType.value?.find((item) => item.name === '晴天')?.icon
}
// 获取数据，很多组件都有用到，并且要30分钟更新一次
const getData = async () => {
  const airStore = useAirStore()
  // 起点气象数据
  let res = await getStartPointDataServer()
  // 垂直测风雷达
  let verticalWind = await getWeatherDataServer()
  // 能见度数据
  let visibilityData = await getVisibilityData()
  // 小型气象站数据
  let smallWeatherData = await getSmallWeatherData()
  if (verticalWind.data) {
    let data = JSON.parse(verticalWind.data.data)
    let arr = []
    for (let i = 0; i < data[0].length; i++) {
      let item = {
        date: data[0][i],
        time: data[1][i],
        lat: data[2][i],
        lng: data[3][i],
        gaodu: data[4][i],
        device: data[5][i],
        windSpeed: data[6][i],
        direction: getWindDirection(data[7][i], true),
        direction2: getWindDirection(data[7][i]),
        VerticalWindSpeed: data[8][i]
      }
      arr.push(item)
    }
    airStore.weatherData = arr
  }
  airStore.hangxianStartInfo = res.data
  airStore.smallWeatherData = smallWeatherData.data
  airStore.visibilityData = visibilityData.data
}
</script>
<template>
  <div class="header">
    <div class="time-wrapper">
      <p>
        <span>{{ curTime }}</span>
        <span>{{ curDate }} {{ weekData }}</span>
      </p>
    </div>
    <!-- <p class="logo" @click="reset">
      <img src="@img/header/logo.png" />
    </p>
    <div class="left">
      <p>
        <span>{{ curTime }}</span>
        <span>{{ curDate }}</span>
      </p>
      <p>
        <span><img :src="getUrl()" /></span>
        <span>{{ WeatherData?.now?.text }}</span>
        <span>&nbsp;20°C&nbsp;</span>
        <span>&nbsp;风向：北风&nbsp;</span>
        <span>&nbsp;风力：3级&nbsp;</span>
      </p>
    </div>
    <div class="right">
      <p @click="UIClick">
        <el-tooltip class="box-item" effect="dark" content="UI显隐" placement="bottom">
          <img class="active" src="@img/header/tool_icon01_active.png" v-if="!UIShow" />
          <img class="normal" src="@img/header/tool_icon01.png" v-else />
        </el-tooltip>
      </p>
      <p @click="eleMapClick">
        <el-tooltip class="box-item" effect="dark" content="加载vtpk" placement="bottom">
          <img class="active" src="@img/header/tool_icon02_active.png" v-if="eleMap" />
          <img class="normal" src="@img/header/tool_icon02.png" v-else />
        </el-tooltip>
      </p>
      <p @click="LayerTreeClick">
        <el-tooltip class="box-item" effect="dark" content="图层树" placement="bottom">
          <img class="active" src="@img/header/tool_icon03_active.png" v-if="LayerTreeShow" />
          <img class="normal" src="@img/header/tool_icon03.png" v-else />
        </el-tooltip>
      </p>
      <p @click="AnimationClick">
        <el-tooltip class="box-item" effect="dark" content="导览" placement="bottom">
          <img class="active" src="@img/header/tool_icon04_active.png" v-if="AnimationShow" />
          <img class="normal" src="@img/header/tool_icon04.png" v-else />
        </el-tooltip>
      </p>
      <p @click="WeatherClick">
        <el-tooltip class="box-item" effect="dark" content="气象" placement="bottom">
          <img class="active" src="@img/header/tool_icon05_active.png" v-if="WeatherShow" />
          <img class="normal" src="@img/header/tool_icon05.png" v-else />
        </el-tooltip>
      </p>
      <p>
        <el-tooltip class="box-item" effect="dark" content="头像" placement="bottom">
          <img src="@img/header/avatar.png" />
        </el-tooltip>
      </p>
    </div> -->
    <img src="@/assets/tietu/top.png" />
  </div>
</template>
<style scoped lang="scss">
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  // height: 85px;
  height: 110px;
  z-index: 10;
  display: flex;
  align-items: center;
  // padding: 0 35px 10px 10px;
  justify-content: space-between;
  // background: linear-gradient(to bottom, rgba(23, 46, 75, 1) 0%, rgba(23, 46, 75, 0.5) 100%);

  .time-wrapper {
    position: absolute;
    top: 0;
    right: -20px;
    height: 100%;
    box-sizing: border-box;
    padding-top: 10px;
    p:first-child {
      position: relative;
      padding: 0 35px;
      display: flex;
      flex-direction: column;

      span:first-child {
        font-size: 24px;
        font-family: 'DINAlternate';
      }

      span:last-child {
        font-size: 16px;
        color: #b4cfe1;
      }
    }
  }
  img {
    width: 100vw;
    height: 110px;
  }

  // &::after {
  //   position: absolute;
  //   content: '';
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background: url('@img/header/header_bg.png') no-repeat center/cover;
  // }

  .logo {
    z-index: 9;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);

    img {
      height: 35px;
    }
  }

  .left {
    position: relative;
    z-index: 1;
    display: flex;

    p:first-child {
      position: relative;
      padding: 0 35px;
      display: flex;
      flex-direction: column;

      span:first-child {
        font-size: 18px;
        font-family: 'DINAlternate';
      }

      span:last-child {
        font-size: 14px;
        color: #b4cfe1;
      }

      // &::after {
      //   position: absolute;
      //   content: '';
      //   right: 0;
      //   top: 8px;
      //   width: 1px;
      //   height: 36px;
      //   background: linear-gradient(
      //     180deg,
      //     rgba(173, 225, 255, 0) 0%,
      //     rgba(173, 225, 255, 0) 1%,
      //     #ade1ff 48%,
      //     rgba(173, 225, 255, 0) 100%
      //   );
      // }
    }

    p:last-child {
      display: flex;
      align-items: center;
      padding: 10px 20px 0;

      span:first-child {
        width: 30px;
        height: 28px;
        margin-bottom: 3px;
        margin-right: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      // span:last-child {
      //   margin-left: 5px;
      //   font-size: 18px;
      //   font-family: 'DINAlternate';
      // }
    }
  }

  .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;

    p {
      width: 43px;
      height: 33px;
      margin: 0 10px;
      cursor: pointer;

      &:last-child {
        width: 38px;
        height: 38px;
      }

      img {
        display: block;
        width: 100%;
      }

      .active {
        margin-top: -5px;
      }
    }
  }
}
</style>
